<template>
    <div class="page-infinite">
    <h1 class="page-title">你可能喜欢</h1>
    <div class="page-infinite-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <ul class="list" v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="50">
          <li v-for="item in morelist" :key="item.id" class="page-infinite-listitem">
             <router-link to="./Cartlist"> <img :src="item.img" class="imm"> </router-link></li>
      </ul>
      <p v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle"></mt-spinner>
        加载中...
      </p>
    </div>
  </div>
</template>
<script>
import {HOMELIST} from "@/requests/api.js"
export default {
  name:'Homelist',
   data () {
      return{
        morelist:[],  
        list:[],
        loading: false,
        allLoaded: false,
        wrapperHeight: 0,
        data:6,
      }
   }, 
 created(){
      // console.log("aaa")
      // console.log(this.$http)
        this.$http.get(HOMELIST)
           .then(resp =>{    
            this.list = resp.data.data
            // console.log(this.list)      
           })          
           .catch(err=>{
 console.log(err)
           })
},
   methods:{
        loadMore() {
           this.loading = true;
  setTimeout(() => {
    let last = this.list[this.list.length - 1];
    console.log(this.list)
         this.morelist=this.list.slice(0,this.data)
         console.log(this.data)
         this.data +=6
         console.log(this.morelist)
    this.loading = false;
  }, 2500);
      }
   },
     mounted() {
      // this.wrapperHeight = document.documentElement.clientHeight - this.$refs.wrapper.getBoundingClientRect().top;
      for (let c = 1; c <=6; c++) {
        this.list.push(c);
      }
    }
  }
     


</script>

<style lang="scss">
.page-infinite-list{
display: flex;
    flex-wrap: wrap;
 flex: 1;
}
.page-infinite-listitem{
    margin-left: 0px;
  
    float: left;
    margin: 0 auto;
    overflow: hidden;
     font-size: 50px;
     text-align: center;
     line-height: 230px;
     display: block;
    
}

.page-title{
    font-size: 15PX;    text-align: center;
    margin-top: 15px;
    margin-bottom: 15px;
}
</style>
